<template>
    <div class="uploadContainer">
      <!-- 需要自动合成的操作部分 -->
          <div class="ledSynthetic">
            <el-image
            style="width: 150px; height: 100px"
            :src="ledbg"           
            placeholder="1212121"
            fit="fill">
            </el-image>
            <el-upload
              ref="upload"
              action=""
              class="avatar-uploader"
              :show-file-list="false"
              :on-change="changeFile"
              name="image">            
              <el-button size="small" type="danger" class="needLong" @click="successFn">合成</el-button>
              <el-button slot="trigger" size="small" type="primary">选取素材</el-button>
            </el-upload> 
          </div>
        <!-- 自己自动上传LED封面或者自动合成渲染的部分  -->
        <!-- 适用于640*640分辨率，1:1LED屏幕 -->
          <div class="ledSynthetic ledShow">
            <uploadBox spantxt="" :coverImg="$store.state.ledsrc[0]" :coverPath="led[0]" v-on:throwFilePath="imgUrl1"></uploadBox>
            <p class="ledInfo">适用于640*640分辨率，1:1LED屏幕</p>
            <div class="positDiv">
              <el-select class="thepositon" v-model="LED_p1" placeholder="套餐价格显示位置" @change="ledchange1">
                <el-option
                  v-for="item in price_position"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>  
            </div>
                    
          </div>
 <!-- 适用于853*640分辨率，4:3LED屏幕 -->
          <div class="ledSynthetic ledShow">
            <uploadBox spantxt="" :coverImg="$store.state.ledsrc[1]" :coverPath="led[1]" v-on:throwFilePath="imgUrl2"></uploadBox>
            <p class="ledInfo">适用于853*640分辨率，4:3LED屏幕</p>
            <div class="positDiv">
              <el-select class="thepositon" v-model="LED_p2" placeholder="套餐价格显示位置"  @change="ledchange2">
                <el-option
                  v-for="item in price_position"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>  
            </div>           
          </div>





    </div>
</template>
<style lang="scss" scoped>

.ledSynthetic{
  display: flex;
    button{
      display: block;
    }
    .needLong{
      width: 88px;
      margin-top: 26px
    }
    .el-image{
      -webkit-filter: drop-shadow(10px 10px 10px rgba(0,0,0,.5)); /*考虑浏览器兼容性：兼容 Chrome, Safari, Opera */
      filter: drop-shadow(10px 10px 10px rgba(0,0,0,.5));
      margin-right: 50px;
    }
    
    
}
.ledShow{
  margin-top: 80px;
  .ledInfo{
    height: 60px;
    width:100%;
    position: absolute;
    top:-40px;
  }
      position: relative;
      .thepositon{
        position: absolute;
        right: 100px;
        top:50px;
        width: 180px;
      }
    }






</style>
<script>
import { abc } from "../../../js/abc.js";
import { potUrl } from "../../../js/config_url.js";
import upload from './upload.vue';
let upPot = 'http://172.16.5.10:7070/api/extend/combo_img'
  export default {
    props:['led','showled','autoLED'],
    components:{
        uploadBox:upload
    },
    data() {
      return {
        upPot:upPot,
        price_position:[
          {'id':'0','name':'居左'},
          {'id':'1','name':'居中'},
          {'id':'2','name':'居右'}
        ],
        LED_p1:'',//1:1屏幕的位置
        LED_p2:'',//4:3屏幕的位置
        led_images:[],//传给父的数据
        ledbg:'',//自动合成背景图
        srcimgs:''//显示图片的地方
      };
    },
    mounted(){
      
      // setTimeout(() => {
      //   console.log('det',this.showled)
      //   this.LED_p1 = this.led[0].split('=')[1]
      //   this.LED_p2 = this.led[1].split('=')[1]
      //   this.led_images = this.led;
      //   this.srcimgs = this.showled[0] 
      // }, 500);
      
    },
    watch:{
      led(nal,oval){
        // console.log('led0',nal+'~'+oval)
        if(this.led[0].indexOf('?alignment_h=') != -1){
          var ledarr0 = this.led[0].split('?alignment_h=')
          this.led[0] =  ledarr0[0];
          this.LED_p1 = ledarr0[1]
        }
        if(this.led[1].indexOf('?alignment_h=') != -1){
          var ledarr1 = this.led[1].split('?alignment_h=')
          this.led[1] =  ledarr1[0];
          this.LED_p2 = ledarr1[1]
        }
         
        // this.LED_p1 = this.led[0].split('=')[1]
        // this.LED_p2 = this.led[1].split('=')[1]
        this.led_images = this.led;
        this.$emit('ledimgs',this.led_images)  
        // this.srcimgs = this.showled[0]
      },
      showled(nal,oval){
        // console.log('led0-show',nal+'~'+oval)
      }
    },
    methods: {
      changeFile(file){
          //自动合成图片，上传本地的背景图时
          let that = this;
          var reader = new FileReader();
          reader.readAsDataURL(file.raw)
          reader.onload = function(e){
              that.ledbg = this.result
          }
      },
      successFn(){
          let that = this;
          that.autoLED.combo_img_base64 = that.ledbg//给c+第三个参数
          let tocdata = JSON.stringify(that.autoLED)   
          abc.post(that,that.upPot,{combo_info:tocdata},function(response) {
            that.showled[0] =  response.data.combo_base64_1
            that.showled[1] = response.data.combo_base64_2
            that.$forceUpdate();
            tophp(that,response.data.combo_base64_1,function(imgs) {
              that.led[0] = imgs
              that.led_images[0] =  that.led[0] +'?alignment_h='+that.LED_p1; 
              that.$emit('ledimgs',that.led_images)            
              that.$forceUpdate();
            })
            tophp(that,response.data.combo_base64_2,function(imgs) {
              that.led[1] = imgs
               that.led_images[1] = that.led[0] +'?alignment_h='+that.LED_p2;  
              that.$emit('ledimgs',that.led_images)         
              that.$forceUpdate();
            })
          },'led')
      },
      ledchange1(vall){
          var that = this;
          that.LED_p1 = vall
          that.led_images[0] = that.led[0] +'?alignment_h='+that.LED_p1;
          that.$emit('ledimgs',that.led_images)
      },
      ledchange2(vall){
          var that = this;
          that.LED_p2 = vall
          that.led_images[1] = that.led[1]  +'?alignment_h='+that.LED_p2;
          that.$emit('ledimgs',that.led_images)
      },
      imgUrl1(data){
        var that = this;
        // 上传套餐图片 ---- 适用于640*640分辨率，1:1LED屏幕（接收input内的连接）
 
        that.led[0] = data 
        that.led_images[0] =  data +'?alignment_h='+that.LED_p1;
        that.$emit('ledimgs',that.led_images)
      },
      imgUrl2(data){
        // 上传套餐图片 ---- 适用于853*640分辨率，4:3LED屏幕（接收input内的连接）
        var that = this;
        that.led[1] = data;
        that.led_images[1] = data +'?alignment_h='+that.LED_p2;
        that.$emit('ledimgs',that.led_images)
      },
    }
  }


// 将c+返回的图片上传的到阿里云
function tophp(that,img,cb){
  // var filpath = ''
    abc.post(that,potUrl.cupload,{image:img},function(res){
        cb(res.data.file_path)
        // that.led[n] = that.led_images[n] = res.data.file_path +'?alignment_h='+that.LED_p1;
        // that.showled[n] = 'https://img.meiktv.com/'+ res.data.file_path +'?alignment_h='+that.LED_p1;
        // that.$forceUpdate();
    })

}

</script>
<style>

</style>